<!DOCTYPE html>

<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>图书管理</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../plugins/elementui/index.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js"></script>
		<script src="../plugins/elementui/index.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/axios-0.18.0.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}

			.el-menu {
				border: none;
				border-right-width: 0;
			}

			.el-button {
				border: none;
			}

			.buttonColor {
				background-color: rgb(32, 155, 159);
			}

			.buttonColor:hover {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor:focus {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor2:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li.active {
				color: rgba(32, 155, 159, 0.773)
			}
			.el-main {
				height: 680px;
			}

			.box {
				height: 550px;
				position: relative;
				width: 98%;
			}

			.box-card {
				width: 70%;
				margin-left: 160px;
				margin-top: 40px;
				height: 70%;
			}

			.clearfix {
				text-align: center;
				font-size: 15px;
			}

			.text {
				text-align: center;
				font-size: 24px;
				font-weight: 700;
				vertical-align: super;
			}
		</style>
	</head>

	<body style="background-color: #545c64;">
		<div id="app">
			<el-header style="text-align: left; background-color: rgba(1, 12, 21, 0.421);">
				<div style="font-size: 20px; color:rgb(32, 155, 159)">
					<div style="float: left;">
						<span>图书管理平台</span></div>
					<div style="float: right; font-size: 15px;">
						<a @click="logout()" style="color:rgb(32, 155, 159); cursor:pointer;">安全退出</a></div>
					<div style="width: 100px; float: right; font-size: 15px;">
						<a href="admin.html" style="color: rgb(32, 155, 159);">{{ adminName }}</a>
					</div>
				</div>
			</el-header>
			<el-container style="height: auto;">
				<el-aside width="200px" style="background-color: rgba(1, 12, 21, 0);">
					<el-menu default-active="6" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="rgb(32, 155, 159)" style="background-color: rgba(1, 12, 21, 0.7); color: white;">
						<el-menu-item index="1" class="el-menu-item" @click="load1()" style="border-right: none;"><i class="el-icon-s-data"></i>数据统计</el-menu-item>
						<el-menu-item index="2" class="el-menu-item" @click="load2()" style="border-right: none;"><i class="el-icon-user-solid"></i>管理员管理</el-menu-item>
						<el-menu-item index="3" class="el-menu-item" @click="load3()" style="border-right: none;"><i class="el-icon-user"></i>用户管理</el-menu-item>
						<el-menu-item index="4" class="el-menu-item" @click="load4()" style="border-right: none;"><i class="el-icon-collection"></i>图书管理</el-menu-item>
						<el-menu-item index="5" class="el-menu-item" @click="load5()" style="border-right: none;"><i class="el-icon-tickets"></i>借阅管理</el-menu-item>
						<el-menu-item index="6" class="el-menu-item" @click="load6()" style="border-right: none;"><i class="el-icon-tickets"></i>公告管理</el-menu-item>
					</el-menu>
				</el-aside>

				<!-- <el-container> -->
				<el-main>
					<div class="content-header">
						<h1>公告管理</h1>
					</div>
					<div class="box">
						<el-card class="box-card">
							<div class="text">
								公告
							</div>
							<div class="content">
								<br/>
								{{ content }}
							</div>
						</el-card>
						<div style="position: absolute; right:260px; top:20px;">
							<el-button type="primary" size="mini" class="buttonColor" @click="handleUpdate()">编辑</el-button>
						</div>
					</div>
					<!-- 编辑标签弹层 -->
					<div class="add-form">
						<el-dialog title="编辑公告" :visible.sync="dialogFormVisible4Edit">
							<el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
								<el-row>
									<el-col :span="24">
										<el-form-item label="公告内容" prop="content">
											<el-input v-model="formData.content" type="textarea" />
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button class="buttonColor2" @click="dialogFormVisible4Edit = false">取消</el-button>
								<el-button type="primary" class="buttonColor" @click="handleEdit()">确定</el-button>
							</div>
						</el-dialog>
					</div>
				</el-main>
				<!-- </el-container> -->
			</el-container>
		</div>

	</body>

	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				content: '',
				adminName: '',
				formData: {}, //表单数据
				dialogFormVisible4Edit: false, //编辑表单是否可见
				rules: { //校验规则
					content: [{
						required: true,
						message: '公告内容为必填项',
						trigger: 'blur'
					}],
				},
			},

			//钩子函数，VUE对象初始化完成后自动执行
			created() {
				this.adminName = localStorage.getItem("adminName");
				if (localStorage.getItem("adminName") == null){
					alert('请先登录!!!');
					window.location.href = "../index.html";
				}
				this.getNotice();
			},

			methods: {
				logout() {
					localStorage.removeItem("adminName");
					localStorage.removeItem("password");
					window.location.href = "../index.html";
				},
				// 网页跳转
				load1(){
					window.location.href="statistics.html";
				},
				load2(){
					window.location.href="admin.html";
				},
				load3(){
					window.location.href="users.html";
				},
				load4(){
					window.location.href="books.html";
				},
				load5(){
					window.location.href="lentRecord.html";
				},
				load6(){
					window.location.href="notice.html";
				},

				//查询公告
				getNotice() {
					axios.get("/notice").then((res) => {
						if (res.data.code == 20041) {
							this.content = res.data.data.content;
						} else {
							this.$message.error(res.data.msg);
						}
					})
				},

				//弹出添加窗口
				handleCreate() {
					this.dialogFormVisible = true;
					this.resetForm();
				},

				//弹出编辑窗口
				handleUpdate() {
					axios.get("/notice").then((res) => {
						// console.log(res.data.data);
						if (res.data.code == 20041) {
							//展示弹层，加载数据
							this.formData = res.data.data;
							console.log(this.formData);
							this.dialogFormVisible4Edit = true;
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},

				//编辑
				handleEdit() {
					//发送ajax请求
					axios.put("/notice", this.formData).then((res) => {
						//如果操作成功，关闭弹层，显示数据
						if (res.data.code == 20031) {
							this.dialogFormVisible4Edit = false;
							this.$message.success("修改成功");
						} else if (res.data.code == 20030) {
							this.$message.error("修改失败");
						} else {
							this.$message.error(res.data.msg);
						}
					}).finally(() => {
						this.getNotice();
					});
				}
			}
		})
	</script>

</html>